<template>
  <el-row class="tbar">
    <el-col :span="12">
      <template v-if="enabledSmsLogin">
        <el-link :underline="false" :class="`${state.loginType === 0 ? 'active' : ''}`" @click="handleSwitchType(0)">
          <span>账号登录</span>
        </el-link>
        <el-divider direction="vertical" />
        <el-link :underline="false" :class="`${state.loginType === 1 ? 'active' : ''}`" @click="handleSwitchType(1)">
          <span>手机登录</span>
        </el-link>
      </template>
    </el-col>
    <el-col :span="12" style="text-align: right">
      <el-link><span class="forget-pwd">忘记密码</span></el-link>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { reactive, computed } from 'vue'
import { ElLink, ElDivider } from 'element-plus'
import { env } from '@/utils'

const emits = defineEmits(['changeType'])

// 定义所有响应式变量
const state = reactive({
  loginType: 0
})

const enabledSmsLogin = computed(() => env.ENABLED_SMS_LOGIN)

const handleSwitchType = (type: number) => {
  state.loginType = type
  emits('changeType', type)
}
</script>
<style lang="scss" scoped>
.tbar {
  margin-top: 0.5rem;
  .el-link {
    opacity: 0.6;
    &.active {
      font-weight: bold;
      opacity: 1;
    }
  }
}
</style>
